<script lang="ts" setup>
import { ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { StarFilled, Star, Share, LocationFilled, MapLocation } from "@element-plus/icons-vue";
import headerIndex from "./components/headerIndex.vue";
import footerIndex from "./components/footerIndex.vue";

const route = useRoute();
const router = useRouter();
const loading = ref(false);
const jobId = ref("");
const isCollected = ref(false);

// 职位详情数据
const jobDetail = ref({
    id: "1",
    title: "AI应用硬件商品开发-智能算法工程师",
    salary: "30-40K·14薪",
    location: "北京",
    workExperience: "3-5年",
    education: "本科及以上",
    tags: ["五险一金", "年终奖", "定期体检", "加班补助", "节日福利"],
    publishDate: "2023-11-15",
    description: `<div>
<h3>1. 产品岗位说明</h3>
<p>a.负责AI硬件产品的需求分析，市场调研及需求分析，制定产品开发策略</p>
<p>b.结合AI技术，识别行业痛点，设计智能解决方案，设计前瞻性功能，持续优化能力</p>
<p>c.负责产品需求分析，制定设计目标，编写设计方案，架构设计（开发、测试、运营等交付）</p>

<h3>2. 岗位管理</h3>
<p>a.项目产品管理，按方向把控项目进度，控制，成本控制及风险管理，保证项目顺利进展</p>
<p>b.项目是否跨职能沟通管理，协调研发生产方面，促进生产进度，处理潜在生产技术相关问题，优化生产流程，不断提升产品品质，以用户为中心</p>
<p>c.行业分析及竞品分析，把握竞争对手方向动向能力，对临AI技术方向预判分析能力</p>
<p>d.包括客户计划，影响分析与用户，协商用户需求，用户评估和商品功能评价等，做商品及AI相关功能模型预测验证</p>
<p>e.做好产品技术方面工作，包括设计评审，功能评审，测试评审等，负责技术和策略优化工作，做好产品前期设计支持</p>
<p>f.技术项目管理方面支持业务，智能手段及功能组合使用，监控产品使用数据（功能量，用户体验，建议等等），进入智能化产品升级阶段</p>

<h3>3. 运用技能管理</h3>
<p>a.对相关领域熟悉，对品类功能理解能力，熟悉商品特性需求下，不断优化功能或服务，持续增强用户好用体验</p>
<p>b.优秀的AI规划水平</p>

<h3>任职要求</h3>
<p>1. 本科及以上学历，专于工业，计算机，自动化等理工科专业优先</p>
<p>2. 5年以上商品部件开发经验，有AI人工（功能场景，交互优化）相关经验优先</p>
<p>3. 具有智能项目，智能家电商品，有家居类商品设计经验优先</p>
<p>4. 具备设计工具（Sketch，Designer，Cadence），决策需求设计UX与UI结合能力</p>
<p>5. 了解AI人工场景（ARM，DSP）以及相关演进，功能（DSL，DL），语言（PyTorch等）</p>
<p>6. 有商品团队合作（团队需求梳理交流，传递沟通能力）有优先</p>
<p>7. 优秀的抽象能力，善断能性价比（Score）提取特征值变量应用化</p>
<p>8.优秀的商品团队合作性，能牵引团队合作推行策略项目实施</p>`,
    company: {
        id: "101",
        name: "小米",
        logo: "https://img.bosszhipin.com/beijin/mcs/banner/71f4ee09b9a2abfb675b5c705fc46c9dcfcd208495d565ef66e7dff9f98764da.jpg?x-oss-process=image/resize,w_120,limit_0",
        industry: "互联网",
        size: "10000人以上",
        funding: "已上市",
        homepage: "https://www.mi.com",
        address: "北京市海淀区清河中街68号小米科技园",
        coordinates: [116.352152, 40.007269],
        introduction: `小米集团成立于2010年4月，2018年7月9日在香港交易所主板挂牌上市(1810.HK)，是一家以智能手机、智能硬件和IoT平台为核心的消费电子及智能制造公司。
胸怀"和用户交朋友，做用户心中最酷的公司"的愿景，小米致力于持续创新，不断追求极致的产品服务体验和公司运营效率，努力践行"始终坚持做感动人心、价格厚道的好产品，让全球每个人都能享受科技带来的美好生活"的公司使命。
小米目前是全球领先的智能手机品牌之一，同时，小米已经建立起全球领先的消费级AIoT物联网平台，截至2021年9月30日，AIoT平台已连接的IoT设备（不包括智能手机及笔记本电脑和平板）数突破4亿。集团业务已进入全球逾100个国家和地区。2021年8月，小米集团连续三年进入《财富》2021年「世界500强排行榜」 (Fortune Global 500) ，位列338名，较2020年大幅提升84位。
 小米集团目前为恒生指数、恒生中国企业指数、恒生科技指数及恒生神州50指数成份股。`,
    },
    hrInfo: {
        name: "王先生",
        position: "招聘经理",
        activeTime: "刚刚活跃",
    },
    similarJobs: [
        {
            id: "2",
            title: "数据算法工程师",
            salary: "30-40K",
            company: "小米",
            location: "北京",
            education: "本科",
            experience: "5-10年",
        },
        {
            id: "3",
            title: "产品经理(AI)",
            salary: "30-40K",
            company: "小米",
            location: "北京",
            education: "本科",
            experience: "5-10年",
        },
        {
            id: "4",
            title: "硬件产品经理",
            salary: "25-35K",
            company: "小米",
            location: "北京",
            education: "本科",
            experience: "3-5年",
        },
        {
            id: "5",
            title: "新机调研工程师",
            salary: "25-35K",
            company: "小米",
            location: "北京",
            education: "本科",
            experience: "3-5年",
        },
    ],
});

// 处理收藏
const toggleCollect = () => {
    isCollected.value = !isCollected.value;
    ElMessage({
        message: isCollected.value ? "已收藏" : "已取消收藏",
        type: "success",
    });
};

// 处理投递简历
const applyJob = () => {
    ElMessage({
        message: "简历投递成功！",
        type: "success",
    });
};

// 处理职位分享
const shareJob = () => {
    ElMessage({
        message: "分享链接已复制到剪贴板",
        type: "success",
    });
};

// 查看公司所有职位
const viewAllJobs = () => {
    router.push({
        path: "/job",
        query: { companyId: jobDetail.value.company.id },
    });
};

// 格式化数据
const formattedDate = computed(() => {
    const date = new Date(jobDetail.value.publishDate);
    return `${date.getMonth() + 1}月${date.getDate()}日`;
});

// 跳转到公司详情页
const goToCompanyInfo = () => {
    router.push({
        path: "/companyInfo",
        query: { id: jobDetail.value.company.id },
    });
};

onMounted(() => {
    // 从路由获取职位ID
    jobId.value = (route.query.id as string) || "1";

    // 这里应该使用实际API获取职位详情，现在使用模拟数据
    loading.value = true;
    setTimeout(() => {
        loading.value = false;
        // jobDetail.value = 实际API返回数据
    }, 500);
});
</script>

<template>
    <div class="scroll_main">
        <div class="page-container">
            <headerIndex />

            <el-container>
                <el-main class="main-container">
                    <el-skeleton :loading="loading" animated :rows="10" v-if="loading"> </el-skeleton>

                    <template v-else>
                        <!-- 职位基本信息区域 -->
                        <div class="job-header-bg">
                            <div class="job-header-container">
                                <el-card class="job-header" shadow="never">
                                    <div class="job-header-content">
                                        <div class="job-title-section">
                                            <div class="job-title-wrap">
                                                <h1 class="job-title">{{ jobDetail.title }}</h1>
                                                <div class="job-salary">{{ jobDetail.salary }}</div>
                                            </div>
                                            <div class="job-action-buttons">
                                                <el-button type="primary" @click="applyJob" class="apply-button"
                                                    >立即投递</el-button
                                                >
                                                <div class="action-items">
                                                    <el-button
                                                        :icon="isCollected ? StarFilled : Star"
                                                        circle
                                                        @click="toggleCollect"
                                                        :class="{ collected: isCollected }"
                                                    />
                                                    <el-button :icon="Share" circle @click="shareJob" />
                                                </div>
                                            </div>
                                        </div>

                                        <div class="job-meta">
                                            <span class="meta-item location"
                                                ><el-icon><LocationFilled /></el-icon> {{ jobDetail.location }}</span
                                            >
                                            <span class="meta-item experience">{{ jobDetail.workExperience }}</span>
                                            <span class="meta-item education">{{ jobDetail.education }}</span>
                                        </div>

                                        <div class="company-info-brief">
                                            <div class="company-logo">
                                                <el-avatar :size="60" :src="jobDetail.company.logo" />
                                            </div>
                                            <div class="company-brief">
                                                <h3
                                                    class="company-name"
                                                    @click="goToCompanyInfo"
                                                    style="cursor: pointer"
                                                >
                                                    {{ jobDetail.company.name }}
                                                </h3>
                                                <div class="company-meta">
                                                    <span>{{ jobDetail.company.funding }}</span>
                                                    <span class="divider">|</span>
                                                    <span>{{ jobDetail.company.industry }}</span>
                                                    <span class="divider">|</span>
                                                    <span>{{ jobDetail.company.size }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </el-card>
                            </div>
                        </div>

                        <!-- 职位详情区域 -->
                        <el-row :gutter="20" class="job-detail-container">
                            <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
                                <!-- 职位描述 -->
                                <el-card class="job-description-card content-card" shadow="hover">
                                    <template #header>
                                        <div class="card-header">
                                            <span>职位描述</span>
                                        </div>
                                    </template>
                                    <div class="job-description" v-html="jobDetail.description"></div>
                                </el-card>

                                <!-- 公司介绍 -->
                                <el-card class="company-info-card content-card" shadow="hover">
                                    <template #header>
                                        <div class="card-header">
                                            <span>公司介绍</span>
                                        </div>
                                    </template>
                                    <div class="company-intro">{{ jobDetail.company.introduction }}</div>
                                </el-card>

                                <!-- 工作地点 -->
                                <el-card class="job-location-card content-card" shadow="hover">
                                    <template #header>
                                        <div class="card-header">
                                            <span>工作地址</span>
                                        </div>
                                    </template>
                                    <div class="address-info">
                                        <el-icon><MapLocation /></el-icon>
                                        <span>{{ jobDetail.company.address }}</span>
                                    </div>
                                    <div class="map-container">
                                        <!-- 这里应放置地图组件 -->
                                        <div class="map-placeholder">
                                            <el-image src="https://via.placeholder.com/600x300?text=地图" fit="cover" />
                                        </div>
                                    </div>
                                </el-card>

                                <!-- 相似职位推荐 -->
                                <el-card class="similar-jobs-card content-card" shadow="hover">
                                    <template #header>
                                        <div class="card-header">
                                            <span>看过该职位的人还看了</span>
                                        </div>
                                    </template>
                                    <div class="similar-jobs-list">
                                        <el-row :gutter="20">
                                            <el-col
                                                :span="12"
                                                v-for="job in jobDetail.similarJobs"
                                                :key="job.id"
                                                class="similar-job-item"
                                            >
                                                <div
                                                    class="similar-job-card"
                                                    @click="router.push(`/jobInfo?id=${job.id}`)"
                                                >
                                                    <div class="job-title-row">
                                                        <span class="sim-job-title">{{ job.title }}</span>
                                                        <span class="sim-job-salary">{{ job.salary }}</span>
                                                    </div>
                                                    <div class="job-company-row">
                                                        <span>{{ job.company }}</span>
                                                        <el-tag size="small">{{ job.location }}</el-tag>
                                                    </div>
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </el-card>
                            </el-col>

                            <!-- 右侧信息栏 -->
                            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                                <!-- 投递简历模块 -->
                                <el-card class="apply-card sidebar-card" shadow="hover">
                                    <div class="apply-container">
                                        <div class="hr-info">
                                            <el-avatar
                                                :size="40"
                                                src="https://via.placeholder.com/40"
                                                class="hr-avatar"
                                            />
                                            <div class="hr-details">
                                                <div class="hr-name">{{ jobDetail.hrInfo.name }}</div>
                                                <div class="hr-position">{{ jobDetail.hrInfo.position }}</div>
                                            </div>
                                            <div class="hr-status">{{ jobDetail.hrInfo.activeTime }}</div>
                                        </div>

                                        <div class="apply-button-container">
                                            <el-button
                                                type="primary"
                                                @click="applyJob"
                                                class="full-width-button apply-button"
                                                >立即沟通</el-button
                                            >
                                        </div>

                                        <div class="qrcode-container">
                                            <div class="title">求职提醒</div>
                                            <div class="hint">扫码加入快速招聘</div>
                                            <div class="qrcode-box">
                                                <el-image src="https://via.placeholder.com/120?text=QR+Code" />
                                            </div>
                                        </div>
                                    </div>
                                </el-card>

                                <!-- 公司所有职位入口 -->
                                <el-card class="company-jobs-card sidebar-card" shadow="hover">
                                    <div class="company-jobs-container">
                                        <div class="company-info">
                                            <div class="company-logo">
                                                <el-avatar :size="50" :src="jobDetail.company.logo" />
                                            </div>
                                            <div class="company-details">
                                                <h4 class="company-name">{{ jobDetail.company.name }}</h4>
                                                <p class="company-brief-info">
                                                    {{ jobDetail.company.size }} | {{ jobDetail.company.industry }}
                                                </p>
                                            </div>
                                        </div>

                                        <div class="view-all-jobs">
                                            <el-button @click="viewAllJobs" class="full-width-button"
                                                >查看更多职位</el-button
                                            >
                                        </div>
                                    </div>
                                </el-card>

                                <!-- 推荐工具 -->
                                <el-card class="tools-card sidebar-card">
                                    <div class="tools-title">工资计算器</div>
                                    <div class="tools-content">
                                        <el-button
                                            @click="router.push('/tools/salary-calculator')"
                                            class="full-width-button"
                                            >计算</el-button
                                        >
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </template>
                </el-main>
            </el-container>

            <footerIndex />
        </div>
        <el-backtop :bottom="80" target=".scroll_main" />
    </div>
</template>

<style scoped lang="less">
/* 页面容器样式 */
.page-container {
    width: 100%;
    overflow-x: hidden;
}

/* 主内容区样式 */
.main-container {
    background-color: #f6f6f8;
    --el-main-padding: 0;
    padding-top: 0; /* 不需要为固定导航留出空间，已在headerIndex组件中处理 */
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 头部背景区域 */
.job-header-bg {
    background-color: #334055;
    padding-top: 70px;
    width: 100%;
}

.job-header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 15px;
    width: 100%;
    box-sizing: border-box;
}

.job-header {
    margin-bottom: 0;
    background-color: transparent;
    border: none;
    color: #fff;

    :deep(.el-card__body) {
        padding: 0;
    }

    .job-header-content {
        padding: 0;
    }

    .job-title-section {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 15px;

        .job-title-wrap {
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            .job-title {
                font-size: 26px;
                font-weight: 600;
                margin: 0 0 10px 0;
                color: #fff;
            }

            .job-salary {
                font-size: 24px;
                color: #ff6b6b;
                font-weight: 600;
            }
        }

        .job-action-buttons {
            display: flex;
            align-items: center;

            .apply-button {
                margin-right: 15px;
                background-color: #0ba25d;
                border-color: #0ba25d;

                &:hover {
                    background-color: #0c8a50;
                    border-color: #0c8a50;
                }
            }

            .action-items {
                display: flex;
                gap: 10px;

                .collected {
                    color: #ff9800;
                }
            }
        }
    }

    .job-meta {
        display: flex;
        margin-bottom: 15px;
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;

        .meta-item {
            margin-right: 20px;
            display: flex;
            align-items: center;

            .el-icon {
                margin-right: 5px;
            }
        }
    }

    .company-info-brief {
        display: flex;
        align-items: center;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 15px;

        .company-logo {
            margin-right: 15px;
        }

        .company-brief {
            .company-name {
                font-size: 16px;
                font-weight: 600;
                margin: 0 0 5px 0;
                color: #fff;
            }

            .company-meta {
                font-size: 14px;
                color: rgba(255, 255, 255, 0.8);

                .divider {
                    margin: 0 8px;
                    color: rgba(255, 255, 255, 0.4);
                }
            }
        }
    }
}

.job-detail-container {
    max-width: 1200px;
    width: 100%;
    margin: 20px auto 30px;
    padding: 0 15px;
    box-sizing: border-box;
}

.content-card {
    margin-bottom: 20px;

    .card-header {
        font-size: 18px;
        font-weight: 600;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }

    &.job-description-card {
        .job-description {
            line-height: 1.8;

            h3 {
                margin: 20px 0 15px;
                font-size: 16px;
                font-weight: 600;
                color: #333;
            }

            p {
                margin-bottom: 10px;
                color: #666;
            }
        }
    }

    &.company-info-card {
        .company-intro {
            line-height: 1.8;
            color: #666;
        }
    }

    &.job-location-card {
        .address-info {
            display: flex;
            align-items: center;
            margin-bottom: 15px;

            .el-icon {
                margin-right: 8px;
                color: #409eff;
            }
        }

        .map-container {
            height: 300px;

            .map-placeholder {
                width: 100%;
                height: 100%;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
    }

    &.similar-jobs-card {
        .similar-jobs-list {
            .similar-job-item {
                margin-bottom: 15px;

                .similar-job-card {
                    cursor: pointer;
                    padding: 10px;
                    border-radius: 5px;
                    transition: all 0.3s;
                    border: 1px solid #eee;
                    background-color: #fff;

                    &:hover {
                        border-color: #409eff;
                        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                    }

                    .job-title-row {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: 8px;

                        .sim-job-title {
                            font-weight: 600;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            flex: 1;
                            color: #333;
                        }

                        .sim-job-salary {
                            color: #ff6b6b;
                            white-space: nowrap;
                            font-weight: 600;
                        }
                    }

                    .job-company-row {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        color: #666;
                        font-size: 14px;
                    }
                }
            }
        }
    }
}

.sidebar-card {
    margin-bottom: 20px;
    border-radius: 4px;

    &.apply-card {
        .apply-container {
            .hr-info {
                display: flex;
                align-items: center;
                margin-bottom: 15px;

                .hr-avatar {
                    margin-right: 10px;
                }

                .hr-details {
                    flex: 1;

                    .hr-name {
                        font-weight: 600;
                        margin-bottom: 3px;
                    }

                    .hr-position {
                        font-size: 14px;
                        color: #666;
                    }
                }

                .hr-status {
                    color: #409eff;
                    font-size: 14px;
                }
            }

            .apply-button-container {
                margin: 20px 0;

                .apply-button {
                    background-color: #0ba25d;
                    border-color: #0ba25d;

                    &:hover {
                        background-color: #0c8a50;
                        border-color: #0c8a50;
                    }
                }
            }

            .qrcode-container {
                text-align: center;
                padding: 15px 0;
                border-top: 1px solid #eee;

                .title {
                    font-weight: 600;
                    margin-bottom: 5px;
                }

                .hint {
                    color: #666;
                    font-size: 14px;
                    margin-bottom: 10px;
                }

                .qrcode-box {
                    width: 120px;
                    margin: 0 auto;
                }
            }
        }
    }

    &.company-jobs-card {
        .company-jobs-container {
            .company-info {
                display: flex;
                align-items: center;
                margin-bottom: 15px;

                .company-logo {
                    margin-right: 10px;
                }

                .company-details {
                    .company-name {
                        font-weight: 600;
                        margin: 0 0 5px 0;
                    }

                    .company-brief-info {
                        font-size: 14px;
                        color: #666;
                        margin: 0;
                    }
                }
            }

            .view-all-jobs {
                margin-top: 15px;
            }
        }
    }

    &.tools-card {
        .tools-title {
            font-weight: 600;
            margin-bottom: 15px;
        }

        .tools-content {
            padding: 5px 0;
        }
    }
}

.full-width-button {
    width: 100%;
}

// 响应式适配
@media (max-width: 992px) {
    .job-detail-container {
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .job-title-section {
        flex-direction: column;
        align-items: flex-start;

        .job-action-buttons {
            margin-top: 15px;
            width: 100%;
            flex-wrap: wrap;

            .apply-button {
                flex: 1;
                margin-bottom: 10px;
                margin-right: 0;
                width: 100%;
            }

            .action-items {
                width: 100%;
                justify-content: space-between;
            }
        }
    }

    .job-meta {
        flex-wrap: wrap;

        .meta-item {
            margin-bottom: 8px;
        }
    }

    .company-info-brief {
        flex-wrap: wrap;

        .company-logo {
            margin-bottom: 10px;
        }
    }

    .job-detail-container {
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .job-header-container {
        padding: 15px 10px;
    }

    .job-detail-container {
        padding: 0 10px;
    }

    .job-title-section .job-title-wrap .job-title {
        font-size: 20px;
    }

    .job-title-section .job-title-wrap .job-salary {
        font-size: 18px;
    }
}
</style>
